<template>
	<view class="container">
		<com-head textTit="完善信息" :typeVal="1" :scrollTop="scrollTop"></com-head>
		
		<!-- 修改头像 -->
		<view class="editProfile common" @click="uploadPhoto()">
			<view class="left">
				<image :src="form.avatar" mode="aspectFill"></image>
				<text class="txt">修改头像</text>
			</view>
			<u-icon name="arrow-right" color="#000" size="28"></u-icon>
		</view>
		<view class="groupItem">
			<view class="list">
				<view class="left">
					 <view class="tit">姓名</view>
					 <input type="text" v-model="form.realname"  placeholder="请输入姓名" placeholder-style="color:#999999"/>
				</view>
			</view>
			<view class="list">
				<view class="left">
					 <view class="tit">昵称</view>
					 <input class="nickName" placeholder="请输入昵称"  v-model="form.username"></input>
				</view>
			</view>
			<view class="list " @click="utlis.goUrl(`/pages/mine/editPhone`)">
				<view class="left">
					 <view class="tit">手机号</view>
					 <input type="number" :disabled="true" v-model="userInfo.phone" placeholder="请输入手机号" placeholder-style="color:#999999"/>
				</view>
				<u-icon name="arrow-right" color="#000" size="28"></u-icon>
			</view>
			<view class="list " @click="show = true">
				<view class="left">
					 <view class="tit">性别</view>
					<text class="txt"  :class="!gender? '':'black'">{{gender}}</text>
				</view>
				<u-icon name="arrow-right" color="#000" size="28"></u-icon>
			</view>
			<view class="list " @click="editBirthday()">
				<view class="left">
					 <view class="tit">出生日期</view>
					<text class="txt" :class="!form.birthday ? '':'black'">{{form.birthday ? form.birthday : '请选择'}}</text>
				</view>
				<u-icon name="arrow-right" color="#000" size="28"></u-icon>
			</view>
			<view class="list " @click="showAddress = true">
				<view class="left">
					 <view class="tit">所在地</view>
					<text class="txt" :class="site == '请选择'? '':'black'">{{site}}</text>
				</view>
				<u-icon name="arrow-right" color="#000" size="28"></u-icon>
			</view>
			
		</view>
		<view class="submit" @click="submit()">
			确定
		</view>
		<u-picker v-model="show" mode="selector" :range="selector" @confirm="confirm" confirm-color="#007664"></u-picker>
		<u-picker 
		:endYear="year"
		:endMonths="month"
		endDay
		confirm-color="#007664"
		v-model="showBirthday" mode="time"  @confirm="confirmBirthday"></u-picker>
		
		<!-- 所在地 -->
		<u-select confirm-color="#007664" v-model="showAddress" label-name="area_name" value-name="id" child-name="child" :default-value="defaultList" mode="mutil-column-auto" :list="list" @confirm="confirmAddress"></u-select>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				year:"",
				month:'',
				day:'',
				time:60,
				disabled:false,
				msg:"发送验证码",
				img:'',
				list:[],
				defaultList:[0,0,0],
				showAddress:false,
				showBirthday:false,
				selector: ['男','女'],
				show:false,
				site:'请选择',
				gender:'',
				form:{
					avatar:'',
					gender:'',
					username:'',
					birthday:'',
					area_ids:'',
				},
				scrollTop: 0
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		async onShow() {
			this.treeAddress()
			this.form.avatar = this.userInfo.avatar
			if(this.userInfo.gender){
				this.gender = this.userInfo.gender == 1 ? "男" : "女"
				this.form.gender = this.userInfo.gender
			}else{
				this.gender="请选择"
			}
			if(this.userInfo.address.length){
				this.site = this.userInfo.address[0].area_name +'-'+ this.userInfo.address[1].area_name +'-'+ this.userInfo.address[2].area_name 
			}
			this.form.realname = this.userInfo.realname
			this.form.username = this.userInfo.username
			this.form.birthday = this.userInfo.birthday
			this.form.area_ids = this.userInfo.area_ids
			// 获取当前日期
			let date = new Date()
			this.year = date.getFullYear()
			this.month = date.getMonth() + 1
			this.day = date.getDate()
		},
		methods: {
			editBirthday(){
				// if(this.form.birthday)return
				this.showBirthday = true
			},
			async sendBtn(){
				if(this.disabled){
					return false
				}
				if(!this.form.phone){
					this.utlis.Toast('手机号不能为空！')
				}else{
					let reg = /^1(3|4|5|6|7|8|9)\d{9}$/;
					if (!reg.test(this.form.phone)) {
						this.$u.toast('手机号格式不正确！')
						return false
					}
					let {data,code} = await this.$u.api.massCode({phone:this.form.phone});
					if(code){
						this.utlis.Toast('发送成功，请注意查收！')
						this.timer()
					}else{
						this.utlis.Toast('验证码发送失败！')
					}
				}
			},
			timer() {
				 if (this.time > 0) {
					this.disabled=true;
					this.time--;
					this.msg=this.time+"秒后重新发送";
					setTimeout(this.timer, 1000);
				 } else{
					this.time=60;
					this.msg="发送验证码";
					this.disabled=false;
				 }
			},
			// 上传文件
			uploadPhoto(){
				let that = this
				wx.chooseImage({
					success: (imgRes) => {
						let tempFilePaths = imgRes.tempFilePaths[0]
						let imgType = tempFilePaths.split(".")[1]
						console.log(tempFilePaths,imgType,"imgResimgResimgRes")
						if(imgType == 'jpg' || imgType == 'png' || imgType == 'cdr'){
							uni.showLoading({
								title: '文件上传中',
								mask: true,
							   });
							  uni.uploadFile({
								url: that.utlis.baseUrl + '/upload',
								filePath: imgRes.tempFilePaths[0],
								name: 'files',
								headers: {
									'Content-Type': 'multipart/form-data' //********划重点
								 },
								success(res) {
									var resdata = JSON.parse(res.data)
									uni.hideLoading();
									that.img = resdata.data
									that.submit(1,that.img)
								},
								fail: (err) => {
									uni.hideLoading();
									that.utlis.Toast("上传失败")
								}
							})
						}else{
							that.utlis.Toast("您上传图片格式不正确")
						}
					}
				})
			},
			async submit(type,img){
				if(type == 1){
					let {code,data} = await this.$u.api.setInfo({avatar:img});
					if(code){
						this.form.avatar = this.img
						await this.getUserInfo()
						this.utlis.Toast("头像修改成功","success")
					}
				}else{
					if(!this.form.birthday){
						this.utlis.Toast("出生日期不能为空")
						return
					}
					if(!this.form.area_ids){
						this.utlis.Toast("所在地不能为空")
						return
					}if(!this.form.realname){
						this.utlis.Toast("姓名不能为空")
						return
					}
					if(!this.form.username){
						this.utlis.Toast("昵称不能为空")
						return
					}
					let {code,data} = await this.$u.api.setInfo(this.form);
					if(code){
						setTimeout(()=>{
						  this.utlis.backPage()	
						},500)
						this.utlis.Toast("修改成功","success")
					}
				}
			},
			// 获取用户信息
			async getUserInfo(){
				let {code,data} = await this.$u.api.userInfo();
				if(code){
					this.$u.vuex('userInfo', data)
				}
			},
			async treeAddress(){
				let {code,data} = await this.$u.api.tree();
				if(code){
					this.list = data;
				}
			},
			confirm(e){
				this.gender = this.selector[e]
				this.form.gender = e[0] + 1
			},
			confirmBirthday(e){
				this.form.birthday = e.year +'-'+ e.month +'-'+ e.day 
			},
			confirmAddress(e) {
				this.defaultList = [e[0].extra,e[1].extra,e[2].extra];
				this.site = `${e[0].label}-${e[1].label}-${e[2].label}`;
				this.form.area_ids = `${e[0].value},${e[1].value},${e[2].value}`;
			},
		}
	}
</script>

<style lang="scss" scoped >
.container{
	padding: 50rpx 30rpx;
	.submit{
		width: 686rpx;
		margin-top: 180rpx;
		line-height: 96rpx;
		background: linear-gradient(140deg,#50DCC2 0%, #007664);
		border-radius: 48rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 32rpx;
		position: fixed;
		bottom: 200rpx;
	}
	.common{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 8rpx ;
		padding: 35rpx 32rpx;
		.left{
			display: flex;
			align-items: center;
			image{
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
				margin-right: 62rpx;
			}
			.tit{
				width: 96rpx;
				margin-right: 62rpx;
			}
			.txt{
				color: #999999;
				font-size: 24rpx;
			}
			.nickName{
				color: #333333;
				font-size: 24rpx;
			}
		}
	}
	.groupItem{
		padding: 0 32rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		.list{
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid rgba(142,142,142,.24);
			padding: 35rpx 0;
			&:last-child{
				border: none;
			}
			.left{
				display: flex;
				align-items: center;
				.tit{
					width: 110rpx;
					margin-right: 50rpx;
				}
				.txt{
					color: #999999;
					font-size: 24rpx;
				}
			}
		}
	}
	
	.editProfile{
		padding: 32rpx 32rpx 32rpx 25rpx;
		margin-bottom: 30rpx;
		margin-top: 20rpx;
	}
	.black{
		color: #333333 !important;
	}
}
.disabled{
	color: #999 !important;
}
</style>
<style >
page{
	background-color: #F6F7FA;
}
</style>
